<template>
  <div id="hm-wuziqi">
    <canvas id="wuziqi"></canvas>
  </div>
</template>

<script>
export default {
  name: 'nav',
  data () {
    return {
    }
  },
  mounted () {
//    function wuziqi() {
//    }
    const canvas = document.getElementById('wuziqi')
    const cxt = canvas.getContext('2d')
    canvas.height = 500
    canvas.width = 500
    const chessNum = 15
    let black = true
    let chessBox = []
    for (let i = 0; i <= chessNum; i++) {
      chessBox[i] = []
      for (let j = 0; j <= chessNum; j++) {
        chessBox[i][j] = 0 // 初始值为0
      }
    }
    console.log('chessBox', chessBox)
    function drawChessBoard () {
      for (let i = chessNum; i >= 0; i--) {
        cxt.strokeStyle = '#D6D1D1'
        cxt.moveTo(25, 30 * i + 25) // 水平方向画16根线，相距30px
        cxt.lineTo(475, 30 * i + 25)
        cxt.stroke()
        cxt.moveTo(30 * i + 25, 25) // 垂直方向画16根线，相距30px；棋盘为15*15
        cxt.lineTo(30 * i + 25, 475)
        cxt.stroke()
      }
    }
    drawChessBoard()
    function oneStep (i, j, k) {
      cxt.beginPath()
      cxt.arc(25 + 30 * i, 25 + 30 * j, 13, 0, 2 * Math.PI) // 绘制棋子
      let bg = cxt.createRadialGradient(25 + 30 * i, 25 + 30 * j, 13, 25 + 30 * i, 25 + 30 * j, 0) // 棋子的渐变颜色
      if (k) {
        bg.addColorStop(0, '#0A0A0A') // 黑棋
        bg.addColorStop(1, '#636766')
      } else {
        bg.addColorStop(0, '#D1D1D1') // 白棋
        bg.addColorStop(1, '#F9F9F9')
      }
      cxt.fillStyle = bg
      cxt.fill()
      cxt.closePath()
    }
    canvas.onclick = function (e) { // 判断落子点
      console.log(e)
      let x = e.offsetX
      let y = e.offsetY
      if (x < 10 || x > 490 || y < 10 || y > 490) return false
      let i = Math.floor((x - 10) / 30)
      let j = Math.floor((y - 10) / 30)
      if (chessBox[i][j] === 0) {
        oneStep(i, j, black)
        if (black) {
          chessBox[i][j] = 1
        } else {
          chessBox[i][j] = 2
        }
        checkWin(i, j, black)
        black = !black
      }
      console.log(i, j)
//      oneStep(i, j, black)
//      black = !black
    }
//    let upDown = 1
    function checkWin (i, j, who) {
      // 检查4条线 fourLine
      let upDown = 1
      let leftRight = 1
      let leftUp = 1
      let rightUp = 1
      console.log(i, j)
      let num = who ? 1 : 2
      // upDown
      for (let x = j - 1; x >= 0; x--) {
        if (chessBox[i][x] === num) {
          upDown = upDown + 1
        } else {
          break
        }
      }
      for (let x = j + 1; x <= chessNum; x++) {
        if (chessBox[i][x] === num) {
          upDown = upDown + 1
        } else {
          break
        }
      }
      // leftRight
      for (let x = i - 1; x >= 0; x--) {
        if (chessBox[x][j] === num) {
          leftRight = leftRight + 1
        } else {
          break
        }
      }
      for (let x = i + 1; x <= chessNum; x++) {
        if (chessBox[x][j] === num) {
          leftRight = leftRight + 1
        } else {
          break
        }
      }
      // leftUp
      for (let x = i - 1; x >= 0; x--) {
        if (chessBox[x][j - Math.abs(i - x)] === num) {
          leftUp = leftUp + 1
        } else {
          break
        }
      }
      for (let x = i + 1; x <= chessNum; x++) {
        if (chessBox[x][j + Math.abs(i - x)] === num) {
          leftUp = leftUp + 1
        } else {
          break
        }
      }
      // rightUp
      for (let x = j - 1; x >= 0; x--) {
        if (chessBox[i + Math.abs(j - x)][x] === num) {
          rightUp = rightUp + 1
        } else {
          break
        }
      }
      for (let x = j + 1; x <= chessNum; x++) {
        if (chessBox[i - Math.abs(j - x)][x] === num) {
          rightUp = rightUp + 1
        } else {
          break
        }
      }
      if (upDown === 5 || leftRight === 5 || leftUp === 5 || rightUp === 5) {
        alert(num + ': win')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #hm-wuziqi{
    canvas{
      display: block;
      margin: 50px auto;
      box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
    }
  }
</style>
